<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/13
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <h2>巡查点信息</h2>
        <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>

        <%--添加页面--%>
        <div id="add" style="display:none;padding:20px">
            <form class="layui-form" id="addForm" lay-filter="addForm">
                <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                    <div class="layui-input-inline">
                        <input type="text" name="pointname" placeholder="请输入巡检点名称" class="layui-input">
                    </div>
                    <div class="layui-inline" >
                        <button class="layui-btn" onclick="search()"  >查询</button>
                    </div>
                    <div class="layui-inline" >
                        <button type="reset" onclick="chongzhi()" class="layui-btn layui-btn-primary">重置</button>
                    </div>

                    <table id="plotTable2" lay-filter="plotTables2"  class="layui-table layui-table-hover"></table>
                </div>
            </form>
        </div>
        <%--修改页面--%>
        <div id="update" style="display:none;padding:20px">
            <form class="layui-form" id="updateForm" lay-filter="updateForm">
                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label">编号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" required  class="layui-input" disabled="disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间:</label>
                    <div class="layui-input-block">
                        <input type="text" name="startdata"  style="display: none">
                        <input type="datetime-local" id="startdata" step="1"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间:</label>
                    <div class="layui-input-block">
                        <input type="text" name="enddata" style="display: none">
                        <input type="datetime-local" id="enddata" step="1"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序:</label>
                    <div class="layui-input-block">
                        <input type="text" name="pointorder"   class="layui-input">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <%--头部工具栏，添加--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn" onclick="add()">添加巡检点</button>
        <button class="layui-btn" onclick="fanhui()">返回</button>
    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>
    <script>
        let $=layui.$
        let table=layui.table
        //渲染表格
        layui.use(function (){
            var table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/SitePointTwo/show",
                toolbar: "#headTool",
                cols:[[
                    {field:'number',align: 'center',type:'numbers',title:"编号"},
                    {field:'id',align: 'center',hide:true,title:"编号"},
                    {field:'pointname',align: 'center',title:"巡检点名称"},
                    {field:'sitetype',align: 'center',title:"巡检类型",templet(d){
                            return d.sitetype == 2 ? "设备巡检" : "环境巡检";
                        }},
                    {field:'siteposition',align: 'center',title:"巡检位置"},
                    {field:'startdata',align: 'center',title:"开始时间"},
                    {field:'enddata',align: 'center',title:"结束时间"},
                    {field:'pointorder',align: 'center',title:"排序"},
                    {field:'siteid',align: 'center',hide:true,title:"巡检项目"},
                    {field:'routeid',align: 'center',hide:true,title:"巡检路线"},
                    {field:'note',align: 'center',hide:true,title:"备注"},
                    {field:'plotid',align: 'center',hide:true,title:"小区"},
                    {fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                if(obj.event == "delete"){
                    deletes(obj.data.id);
                }else if(obj.event == "update"){
                    updates(obj);
                }
            })
        })
        //第二张表格渲染
        layui.use(function (){
            var table=layui.table;
            table.render({
                id:"two",
                elem:"#plotTable2",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/SitePointTwo2/showTwo",
                cols:[[
                    {type: 'checkbox'},
                    {field:'number',align: 'center',type:'numbers',title:"编号"},
                    {field:'id',align: 'center',hide:true,title:"编号"},
                    {fixed: 'right',field:'pointname',align: 'center',title:"巡检点名称"}
                ]]
            })
        })
        //点击添加
        function add(){
            layui.table.reload('two');
            layui.layer.open({
                type : 1,
                title : "选择巡检点",
                area:["800px","530px"],
                content: $("#add"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    var checkStatus = table.checkStatus('two')
                        , data = checkStatus.data;

                    var ids = new Array();

                    for (let i = 0; i < data.length; i++) {
                        ids[i] = data[i].id;
                    }

                    console.log(JSON.stringify(data))

                    console.log(ids,typeof ids)

                    //发送ajax请求
                    $.get("/Site/SitePointTwo/update?ids="+ids)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');

                            layui.table.reload('two');
                        });
                }
            });
        }
        //返回巡查路线页面
        function fanhui(){
            window.location = "/Site/Siteroute/index";
        }
        //点击去查询
        function search(){
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('two',{where : where});
        }
        //点击重置
        function chongzhi(){
            $("[name=pointname]").val("");
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('two',{where : where});
        }
        //修改
        function updates(obj){
            //先赋值
            layui.form.val('updateForm', obj.data);
            $("[name = id]").val(obj.data.id)
            $("#startdata").val($("[name = startdata]").val())
            $("#enddata").val($("[name = enddata]").val())

            layui.form.render('select');

            //弹窗
            layui.layer.open({
                type : 1,
                title : "修改用户",
                area:["500px","500px"],
                content: $("#update"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $("[name = startdata]").val($("#startdata").val().replace("T"," "));
                    $("[name = enddata]").val($("#enddata").val().replace("T"," "));

                    //通过表单序列化，获取输入的内容
                    var updateForm = layui.form.val("updateForm");

                    console.log(updateForm)
                    //发送ajax请求
                    $.post("/Site/SitePointTwo/updatetwo",updateForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }
            });
        }

        //点击删除
        function deletes(id){
            layui.layer.open({
                type : 0,
                title : "提示",
                area:["260px","180px"],
                content:"  确定删除吗？",
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $.get("/Site/SitePointTwo/delete?id="+id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        })
                }
            });
        }
    </script>
</body>
</html>
